import React, { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';

function Login (props) {
  const { navigation } = props;
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');

  const onLogin = () => {
    if (userName && password) {
      global.Tools.toast('登陆成功');
      global.Tools.setAsyncStorage("userInfo", JSON.stringify({
        userName,
        password
      }));
      setTimeout(() => {
        navigation.navigate('MainScreen');
      }, 500)
    } else {
      global.Tools.toast('账号或密码不能为空');
    }
  }
  const onWeChatLogin = () => {
    global.Tools.toast('功能暂未开放');
  }

  return (
    <View style={[styles.page, styles.flexColumnCenter]}>
      <View style={styles.top}>
        <Text style={styles.topTitle}>{global.Constant.AppName}</Text>
      </View>
      <View style={styles.mid}>
        <TextInput style={[styles.inputBox, styles.inputLoginBox]}
          onChangeText={text => setUserName(text)}
          placeholderTextColor="#C0C4CC"
          placeholder="登陆"
          maxLength={20}
          value={userName} />
        <TextInput style={styles.inputBox}
          onChangeText={text => setPassword(text)}
          placeholderTextColor="#C0C4CC"
          placeholder="密码"
          secureTextEntry
          maxLength={20}
          value={password} />
      </View>
      <View style={[styles.bottom, styles.flexColumnCenter]}>
        <TouchableOpacity activeOpacity={0.8} onPress={onLogin}>
          <Text style={styles.loginBtn}>登陆</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.8} onPress={onWeChatLogin}>
          <Text style={styles.weChatLoginBtn}>微信登陆</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.8}>
          <Text style={styles.registerBtn}>注册</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
};

const styles = StyleSheet.create({
  flexColumnCenter: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  page: {
    flex: 1,
  },
  topTitle: {
    color: 'rgb(0, 0, 0)',
    fontFamily: 'Bree Serif',
    fontSize: 42,
    lineHeight: 62,
    letterSpacing: -1.0080000162124634,
    textAlign: 'left',
  },
  mid: {
    marginTop: 56
  },
  inputBox: {
    width: 300,
    height: 40,
    color: 'rgb(0, 0, 0)',
    fontSize: 18,
    borderBottomWidth: 1,
    borderBottomColor: 'rgb(0, 0, 0)',
    textAlign: 'center',
  },
  inputLoginBox: {
    marginBottom: 35
  },
  bottom: {
    marginTop: 86
  },
  loginBtn: {
    width: 200,
    height: 60,
    borderRadius: 60,
    backgroundColor: '#000000',
    textAlign: 'center',
    lineHeight: 60,
    color: '#fff',
    fontSize: 24
  },
  weChatLoginBtn: {
    fontSize: 18,
    color: '#000',
    marginBottom: 28,
    marginTop: 54
  },
  registerBtn: {
    width: 126,
    height: 38,
    fontSize: 15,
    borderRadius: 38,
    backgroundColor: '#000000',
    textAlign: 'center',
    lineHeight: 38,
    color: '#fff',
  }
});

export default Login;